<template>
  <div id="cart-nav">
    <nav-bar class="navBarCart"><div slot="center">购物车{{cartList.length !== 0 ? cartList.length : ''}}</div></nav-bar>
    <better-scroll
      ref="betScroll"
      class="contentRef"
    >
      <cart-list-item :cartLists="cartList"></cart-list-item>
    </better-scroll>
    <cart-bottom-bar></cart-bottom-bar>
  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import CartBottomBar from "views/cart/children/CartBottomBar";
  import BetterScroll from "components/common/betterScroll/BetterScroll";
  import CartListItem from "views/cart/children/CartListItem";
  import {Debounce} from "common/util";

  export default {
    name: "Cart",
    components: {
      NavBar,
      CartBottomBar,
      BetterScroll,
      CartListItem
    },
    data(){
      return {
        cartList: this.$store.state.cartList
      }
    },
    methods: {
      imagesLoads(){
        let debounce = Debounce(this.$refs.betScroll.refresh,50);
        debounce();
      }
    },
    activated() {
      this.imagesLoads();
    }
  }
</script>

<style scoped>
  .navBarCart {
    background-color: var(--color-tint);
    color: white;
    font-size: 18px;
    font-weight: bold;
    z-index: 999;
    position: relative;
  }
  .wrapper{
    background-color: white;
    overflow: hidden;
    position: absolute;
    top: 49px;
    bottom: 93px;
    left: 0;
    right: 0;
  }
</style>